<template>
    <div class="detailMap">
        <div class="map">
            <div id="container"></div>
            <div id="check">
                <div class="checkTitle">
                    <span @click="check('交通设施服务',0)">交通</span>
                    <span @click="check('风景名胜',1)">风景</span>
                </div>
                <div class="content">
                    <p 
                    v-for="(item,index) in signarr"
                    :key="index"
                    @mouseenter="enterChange(index)"
                    class="signItem">
                        <span class="singTitle">{{ item.title }}</span>
                        <span class="signLocation">{{ item.location }} m</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var map;
export default {
    props: {
        location: {
            type: Object,
            default: {}
        },
        hotelName:{
            type: String,
            default: ''
        }
    },
    data(){
        return {
            map: {},
            longitude: '',
            latitude: '',
            searchType: '交通设施服务',
            icon: [
                'http://www.yusen.space:8889/toDoList/img/traffic.png',
                'http://www.yusen.space:8889/toDoList/img/scenery.png'
            ],
            num:0,
            signarr: []
        }
    },
    methods:{
        // hover事件
        enterChange(index){
            console.log(this.signarr[index].position);
            let { lng,lat } = this.signarr[index].position;
            this.longitude = lng;
            this.latitude = lat;
            // 平移镜头
            map.panTo([this.longitude, this.latitude]);
        },
        // 切换到风景区
        check(type,num){
            this.signarr = [];
            this.searchType = type;
            this.num = num;
            this.initMap().then(res => {
                this.initLandmark();
            })
        },
        // 初始化插件
        importTool(document){
            var url = 'https://cache.amap.com/lbs/static/addToolbar.js';
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        },
        // 初始化地图
        initMap(){
            let {latitude,longitude} = this.location;
            this.latitude = latitude;
            this.longitude = longitude;
            map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 20,//级别,
                center: [this.longitude, this.latitude]
            });
            // 构建中心点图标
            var centerIcon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: 'http://www.yusen.space:8889/toDoList/img/hotel_1.png',  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            });
            // 构建中心点标记
            let marker = new AMap.Marker({
                size: new AMap.Size(30, 30),
                position: new AMap.LngLat(this.longitude, this.latitude),
                offset: new AMap.Pixel(-10, -10),
                icon: centerIcon, // 添加 Icon 实例
                zoom: 13,
                title: this.hotelName
            });
            map.add(marker);
            return Promise.resolve('完成');
        },
        // 加载所有地标
        initLandmark(){
            let {latitude,longitude} = this.location;
            // 构建附近位置的图标
            var otherIcon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 图标尺寸
                image: this.icon[this.num],  // Icon的图像
                imageSize: new AMap.Size(30, 30)   // 根据所设置的大小拉伸或压缩图片
            });
            AMap.service(["AMap.PlaceSearch"], () => {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({ 
                    type: this.searchType, // 兴趣点类别
                    pageSize: 30, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                });
                
                var cpoint = [this.longitude, this.latitude]; //中心点坐标
                let markerList = [];
                placeSearch.searchNearBy('', cpoint, 2000, (status, result) => {
                    let { poiList:{ pois } } = result;
                    pois.forEach(ele => {
                        // 获取到其他地标的位置
                        let {lng,lat} = ele.location;
                        let itemLocation = [lng,lat];
                        // 计算出与中心点的距离
                        var dis = AMap.GeometryUtil.distance(cpoint, itemLocation);
                        // console.log(Math.floor(dis),ele.name);
                        let marker = new AMap.Marker({
                            size: new AMap.Size(30, 30),
                            position: new AMap.LngLat(lng,lat),
                            offset: new AMap.Pixel(-10, -10),
                            icon: otherIcon, // 添加 Icon 实例
                            zoom: 13,
                            title: ele.name
                        })
                        markerList.push(
                            marker
                        )
                        this.signarr.push({
                            location: Math.floor(dis),
                            title: ele.name,
                            position: {lng,lat}
                        })
                    })
                    map.add(markerList);
                });
            });
        }
    },
    mounted(){
        setTimeout(() =>{
            this.importTool(window.document);
            this.initMap().then(res => {
                this.initLandmark();
            })
        },1000)
    }
}
</script>

<style scoped lang="less">
    .detailMap{
        .map{
            display: flex;
            height: 400px;
            margin-top: 50px;
            justify-content: space-around;
            #container{
                flex: 0 0 68%;
            }
            #check{
                flex: 0 0 30%;
                .checkTitle{
                    padding: 5px;
                    border-bottom: 2px solid #cccccc;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                    span{
                        cursor: pointer;
                        &:nth-child(2){
                            margin-left: 15px;
                        }
                    }
                    
                    span:hover{
                        color: orange;
                        font-weight: 700;
                    }
                }
                .content{
                    height: 350px;
                    overflow-y: auto;
                    .signItem{
                        display: flex;
                        justify-content: space-between;
                        padding: 5px;
                        cursor: pointer;
                        height: 35px;
                        align-items: center;
                        font-size: 14px;
                        color: #666;
                        .singTitle{
                            flex: 0 0 60%;
                        }
                        .signLocation{
                            flex: 0 0 30%;
                        }
                    }
                }
            }
        }   
    }
    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
        border-bottom: solid 1px silver;
    }
</style>